<script setup>

import api from './api.js'

let treeData = ref([]);
let organizationId = inject('organizationId');


async function getList() {
  treeData.value = await api.getOrganizationTree();
}

function chooseDept(node) {
  organizationId.value = node.id;
}

onMounted(()=> {
  getList();
})

</script>

<template>

  <div class="organization-structure-main" style="height: 100%;display: flex;flex-direction: column;">

    <el-tree :data="treeData" default-expand-all @node-click="chooseDept" highlight-current>
      <template #default="{ data }">
        <span class="custom-tree-node">
          <span class="name">{{ data.name }}</span>
        </span>
      </template>
    </el-tree>

  </div>
</template>

<style scoped lang="scss">
  .name {
    font-size: 12px;
    color: #0b1019;
  }
</style>